<template>
	<div style="background-color: white;">
		<a-row :gutter="20" justify="end">
			<a-col :span="2" class="py-4 text-center">
				<a-space>
					<a-button @click="closeTab('/planzz')">
						<close-outlined />关闭
					</a-button>
				</a-space>
			</a-col>
		</a-row>
		<h2 style="text-align: center;padding: 12px">{{ planInfo.project?.name }}周转料计划表</h2>
		<div style="padding: 12px;" class="flex">
			<div class="flex-auto">计划编号： {{ planInfo.code }}</div>
			<div class="flex-auto">计划制定人： {{ planInfo.opr_user?.fullname }}</div>
		</div>
		<div style="padding: 12px;">
			<a-button v-permission="17" type="primary" style="margin-right: 6px;" @click="router.push(`/plan/createzz?parent_id=${planId}`)">创建新的周转料计划</a-button>
			<a-button v-permission="187" type="primary" style="margin-right: 6px;" @click="router.push(`/plan/summary/${planId}`)">周转料计划汇总</a-button>
		</div>
		<a-table row-key="id" :expanded-row-keys="expandedRowKeys" :expand-icon="expandIcon" :pagination="pagination" :data-source="dataSource" :columns="columns" @expand="handleExpand">
			<template #bodyCell="{ column, record }">
				<template v-if="column.key === 'operation'">
					<a-button v-permission="24" type="link" @click="router.push(`/planzz/detailinfo/${record.id}`);">查看</a-button>
					<template v-if="![0,1,2].includes(record.workflow_status)">
						<a-button v-permission="22" type="link" @click="router.push(`/plan/editzz/${record.id}?parent_id=${planId}`);">
							<EditOutlined />修改
						</a-button>
						<a-button v-permission="103" type="link" style="color:#ff7875" @click="deletePlan(record.id)">
							<DeleteOutlined />删除
						</a-button>
					</template>
				</template>
				<template v-else-if="column.key === 'workflow_status'">
					<div>
						<a-workflow type="status" module="plan" :status="record.workflow_status" />
					</div>
				</template>
			</template>
			<template #expandedRowRender="{ record }">
				<a-table :columns="innerColumns" :data-source="record.materials" :pagination="false"></a-table>
			</template>
		</a-table>
	</div>
</template>

<script setup lang="jsx">
import { EditOutlined, DeleteOutlined, CaretUpOutlined, CaretDownOutlined, CloseOutlined } from "@ant-design/icons-vue";
import { usePagination } from "vue-request";
import { ref, inject, computed, getCurrentInstance, watch } from 'vue'
import { post } from "../utils";
import dayjs from "dayjs";

import { useRoute, useRouter } from "vue-router";
import { AWorkflow } from "@/components/index.js";

const expandIcon = ({ expanded, onExpand, record }) => {

	return (<span onClick={e => onExpand(record, e)} style={{ cursor: 'pointer', marginRight: '8px' }}>
		{expanded ? <CaretUpOutlined /> : <CaretDownOutlined />}
	</span>)


}

const route = useRoute()
const router = useRouter()

const planId = computed(() => {
	return route.params.id || 0;
});

const planInfo = ref({})
post("plan/info", { id: planId.value }).then(data => {
	planInfo.value = data
});

const columns = [{
	title: '序号',
	dataIndex: 'id',
}, {
	title: '周转料计划',
	dataIndex: 'name',
}, {
	title: '创建时间',
	dataIndex: 'create_time',
	customRender: ({ text }) => {
		return dayjs(text).format("YYYY-MM-DD HH:mm:ss");
	}
}, {
	title: '创建人',
	dataIndex: 'opr_user',
	customRender: ({ text }) => {
		return text.fullname || text.username;
	}
},
{
	title: "状态",
	//dataIndex: "status",
	key: "workflow_status",
	sorter: false,
	width: 70,
	ellipsis: true
},
{
	title: '操作',
	dataIndex: 'operation',
	key: 'operation',
	width: 150,
	fixed: 'right',
}];

const innerColumns = [
	{
		title: "周转料名称",
		dataIndex: "name",
		width: 150,
	},
	{
		title: "型号规格",
		dataIndex: "model",
		width: 150,
	},
	{
		title: "质量标准技术要求",
		dataIndex: "standard",
		width: 200,
		align: "center"
	},
	{
		title: "计量单位",
		dataIndex: "unit",
		width: 150,
		align: "center"
	},
	{
		title: "需用数量",
		dataIndex: "quantity",
		width: 100,
		align: "center"
	},
	{
		title: "计划进场时间",
		dataIndex: "add_time",
		width: 150,
		align: "center",
		customRender: ({ text }) => {
			return dayjs(text).format("YYYY-MM-DD");
		}
	},
	{
		title: "计划租赁时长",
		dataIndex: "use_time",
		width: 150,
		align: "center"
	},
	{
		title: "时长单位",
		dataIndex: "time_unit",
		width: 120,
		align: "center"
	},
	{
		title: "备注",
		dataIndex: "memo",
		width: 200,
		align: "center"
	}
];

const { data, current, run, pageSize, total } = usePagination(params => post("plan", { type: 2, parent_id: planId.value }), {
	pagination: {
		currentKey: "page",
		pageSizeKey: "page_size",
		totalKey: "total"
	}
});

const dataSource = ref([])
watch(data, (newVal) => {
	if (newVal && newVal.data) {
		dataSource.value = newVal.data.map(item => {
			item.materials = item.materials.map(material => {
				return {
					...material,
					...material.PlanMaterial
				}
			})
			return item
		}).sort((a, b) => a.id - b.id)
	}
})

const expandedRowKeys = ref([])
const handleExpand = (expanded, record) => {
	if (expanded) {
		expandedRowKeys.value.push(record.id)
	} else {
		const index = expandedRowKeys.value.findIndex(key => key === record.id)
		if (index > -1) {
			expandedRowKeys.value.splice(index, 1)
		}
	}
}

const pagination = computed(() => ({
	total: total.value,
	current: current.value,
	pageSize: pageSize.value
}));

const { proxy } = getCurrentInstance()
const deletePlan = id => {
	proxy.$confirm({
		title: "确认提示",
		content: `确定要删除${typeof id === "number" ? "当前" : "选中"}的计划吗？`,
		okText: "确认",
		cancelText: "取消",
		onOk() {
			post("plan/delete", { id }).then(() => {
				proxy.$message.success("计划删除成功");
				run()
			}).catch(err => {
				proxy.$message.error(err);
			});
		}
	});
};
const closeTab = inject("closeTab");

</script>

<style scoped lang="scss"></style>